<template>
  <div class="payment">
    <div class="payment-info">
      <h2>订单支付</h2>
      
      <div class="order-summary">
        <p class="order-id">订单号：{{ order.id }}</p>
        <p class="amount">支付金额：<span class="price">¥{{ order.totalAmount }}</span></p>
      </div>
      
      <div class="payment-methods">
        <h3>选择支付方式</h3>
        <el-radio-group v-model="paymentMethod">
          <div class="payment-method-item">
            <el-radio label="ALIPAY">
              <img src="@/assets/alipay.png" alt="支付宝">
              <span>支付宝</span>
            </el-radio>
          </div>
          <div class="payment-method-item">
            <el-radio label="WECHAT">
              <img src="@/assets/wechat.png" alt="微信支付">
              <span>微信支付</span>
            </el-radio>
          </div>
        </el-radio-group>
      </div>
      
      <div class="actions">
        <el-button type="primary" :loading="paying" @click="pay">
          立即支付
        </el-button>
      </div>
    </div>
    
    <!-- 支付宝支付弹窗 -->
    <el-dialog v-model="alipayVisible" title="支付宝支付" width="300px">
      <div class="qrcode-container">
        <img :src="qrCodeUrl" alt="支付二维码">
        <p>请使用支付宝扫码支付</p>
      </div>
    </el-dialog>
    
    <!-- 微信支付弹窗 -->
    <el-dialog v-model="wechatVisible" title="微信支付" width="300px">
      <div class="qrcode-container">
        <img :src="qrCodeUrl" alt="支付二维码">
        <p>请使用微信扫码支付</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const store = useStore()

const order = ref({})
const paymentMethod = ref('ALIPAY')
const paying = ref(false)
const alipayVisible = ref(false)
const wechatVisible = ref(false)
const qrCodeUrl = ref('')

let paymentCheckTimer: number | null = null

const loadOrder = async () => {
  try {
    const orderId = route.params.orderId
    const response = await store.dispatch('order/getOrderById', orderId)
    order.value = response
    
    if (order.value.status !== 'PENDING') {
      ElMessage.warning('该订单不需要支付')
      router.push('/orders')
    }
  } catch (error) {
    ElMessage.error('加载订单信息失败')
    router.push('/orders')
  }
}

const pay = async () => {
  paying.value = true
  try {
    const response = await store.dispatch('payment/createPayment', {
      orderId: order.value.id,
      method: paymentMethod.value
    })
    
    qrCodeUrl.value = response.qrCodeUrl
    
    if (paymentMethod.value === 'ALIPAY') {
      alipayVisible.value = true
    } else {
      wechatVisible.value = true
    }
    
    startPaymentCheck()
  } catch (error) {
    ElMessage.error('创建支付失败')
  } finally {
    paying.value = false
  }
}

const startPaymentCheck = () => {
  paymentCheckTimer = window.setInterval(async () => {
    try {
      const status = await store.dispatch('payment/checkPaymentStatus', order.value.id)
      if (status === 'SUCCESS') {
        clearInterval(paymentCheckTimer!)
        alipayVisible.value = false
        wechatVisible.value = false
        ElMessage.success('支付成功')
        router.push('/orders')
      }
    } catch (error) {
      console.error('检查支付状态失败:', error)
    }
  }, 2000)
}

onMounted(() => {
  loadOrder()
})

onUnmounted(() => {
  if (paymentCheckTimer) {
    clearInterval(paymentCheckTimer)
  }
})
</script>

<style scoped>
.payment {
  padding: 20px;
}

.payment-info {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.order-summary {
  margin: 20px 0;
  padding: 20px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.price {
  color: #f56c6c;
  font-size: 24px;
  font-weight: bold;
}

.payment-methods {
  margin: 20px 0;
}

.payment-method-item {
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 10px;
}

.payment-method-item img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  vertical-align: middle;
}

.actions {
  margin-top: 30px;
  text-align: center;
}

.qrcode-container {
  text-align: center;
}

.qrcode-container img {
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
}
</style> 